<form class="layui-form user-data" id="signin-user-body">
    <div class="header-panel">
        <div class="header-item">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名:</label>
                <div class="layui-input-block">
                    <input type="text" model='user_name' placeholder="请输入姓名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">出生年月:</label>
                <div class="layui-input-block">
                    <input type="text" model='user_birthday' placeholder="出生年月日" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">政治面貌:</label>
                <div class="layui-input-block">
                    <input type="text" model="political_identity" placeholder="请输入政治面貌" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">学历:</label>
                <div class="layui-input-block">
                    <input type="text" model="user_degree" placeholder="请输入学历" class="layui-input">
                </div>
            </div>
        </div>
        <div class="header-item">
            <div class="layui-form-item">
                <label class="layui-form-label">性别:</label>
                <div class="layui-input-block">
                    <input type="radio" model="user_sex" name="user_sex" value="1" title="男">
                    <input type="radio" model="user_sex" name="user_sex" value="2" title="女" checked>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">民族:</label>
                <div class="layui-input-block">
                    <input type="text" model="user_national" placeholder="请输入民族" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">健康状况:</label>
                <div class="layui-input-block">
                    <input type="text" model="user_health" placeholder="请输入健康状况" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">毕业时间:</label>
                <div class="layui-input-block">
                    <input type="text" model="graduation_time" placeholder="请输入毕业时间" class="layui-input">
                </div>
            </div>
        </div>
        <div class="header-item header" style="width: 200px;">
            <img src="./images/add.png" mask class="default_add_header">
            <img model="user_header" show-header src="" title="头像">
            <input type="file" id="upLoadImg">
        </div>
    </div>
    <div class="user-data-body">
        <div class="data-item">
            <div class="layui-form-item">
                <label class="layui-form-label">真实姓名:</label>
                <div class="layui-input-block">
                    <input type="text" model="real_name" placeholder="请输入真实姓名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">现住地址:</label>
                <div class="layui-input-block Adress-panel">
                    <select id="map-province" lay-filter="province">
                        <option value="">请选择省份</option>
                    </select>
                    <select id="map-city" lay-filter="city">
                        <option value="">请选择城市</option>
                    </select>
                    <select id="map-area" lay-filter="area" model="address_id">
                        <option value="">请选择区/县</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">电子邮箱:</label>
                <div class="layui-input-block">
                    <input type="text" model="user_email" placeholder="请输入电子邮箱" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">部门:</label>
                <div class="layui-input-block">
                    <select model="department_id" lay-search>
                        <option value="">请选择部门</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">登录密码:</label>
                <div class="layui-input-block">
                    <input model="user_pwd" type="password" placeholder="请输入登录密码" class="layui-input">
                </div>
            </div>
        </div>
        <div class="data-item">
            <div class="layui-form-item">
                <label class="layui-form-label">身份证号:</label>
                <div class="layui-input-block">
                    <input type="text" model="real_card" placeholder="请输入身份证号" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">街道地址:</label>
                <div class="layui-input-block">
                    <input type="text" model="user_address" placeholder="请输入街道地址" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">联系方式:</label>
                <div class="layui-input-block">
                    <input type="text" model="user_phone" placeholder="请输入联系方式" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色:</label>
                <div class="layui-input-block">
                    <select model="role_id" lay-search>
                        <option value="">请选择角色</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确定密码:</label>
                <div class="layui-input-block">
                    <input model="confirm_pwd" type="password" placeholder="再次确定密码" class="layui-input">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">个人说明:</label>
        <div class="layui-input-block">
            <textarea model="user_info" name="desc" placeholder="请输入个人说明" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" type="button" onclick="userSignIn()">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script>
    function userSignIn() {
        var data = getModel({ elem: "#signin-user-body" }), checkData = [];
        Log(data);
        for (var key in data) {
            checkData.push([key, 'require']);
            if (key == "user_phone") checkData.push(['user_phone', 'phone', '手机号码']);
            if (key == "user_email") checkData.push(['user_email', 'email', '电子邮箱']);
            if (key == "confirm_pwd") checkData.push(['confirm_pwd', 'confirm', '两次输入密码不一致', 'user_pwd']);
        }
        var validate = new Validate(),
            check = validate.check(data, checkData);
        Log(check);
        if (!check) {
            msg(validate.getError());
            return false;
        }
        $.post(api.user.signIn, data, function (res) {
            msg(res.msg);
        }, 'json');

    }

    layui.use(['form', 'laydate'], function () {
        var form = layui.form, laydate = layui.laydate;
        /*渲染出生年月日日期选择器*/
        laydate.render({
            elem: '[model="user_birthday"]'
        });
        /*毕业时间生日日期选择器*/
        laydate.render({
            elem: '[model="graduation_time"]'
            , type: 'month'
        });
        /*渲染与初始化省级选择框*/
        $.post(api.util.getProvince, function (res) {
            $.each(res.data, function (index, Item) {
                $("#map-province").append('<option value="' + Item.province_id + '">' + Item.province_name + '</option>');
            });
            form.render('select');
        }, 'json');

        /*省级选择渲染市级选择框*/
        form.on('select(province)', function (data) {
            var value = data.value;
            if (value == "") return false;
            /*初始化区县、城市下拉框*/
            $("#map-area").html('<option value="">请选择区/县</option>');
            $("#map-city").html('<option value="">请选择城市</option>');
            /*渲染城市下拉框*/
            $.post(api.util.getCity, { province_id: value }, function (res) {
                $.each(res.data, function (index, Item) {
                    $("#map-city").append('<option value="' + Item.city_id + '">' + Item.city_name + '</option>');
                });
                form.render('select');
            }, 'json');
        });
        /*市级选择渲染区级选择框*/
        form.on('select(city)', function (data) {
            var value = data.value;
            if (value == "") return false;
            /*初始化区县下拉框*/
            $("#map-area").html('<option value="">请选择区/县</option>');
            /*渲染区县下拉框*/
            $.post(api.util.getArea, { city_id: value }, function (res) {
                $.each(res.data, function (index, Item) {
                    $("#map-area").append('<option value="' + Item.area_id + '">' + Item.area_name + '</option>');
                });
                form.render('select');
            }, 'json');
        });
        /*渲染部门选择框*/
        $.post(api.department.getAllDepartment, function (res) {
            $.each(res.data, function (index, item) {
                $("[model='department_id']").append('<option value="' + item.department_id + '">' + item.department_name + '</option>');
            });
            form.render();
        }, 'json');
        /*渲染角色选择框*/
        $.post(api.role.get, function (res) {
            $.each(res.data, function (index, item) {
                $("[model='role_id']").append('<option value="' + item.role_id + '">' + item.role_name + '</option>');
            });
            form.render();
        }, 'json');
    });
    $(".header-item.header img").click(function () {
        $("#upLoadImg").click();
    });
    $("#upLoadImg").change(function () {
        var formData = new FormData(), image = document.getElementById("upLoadImg").files[0];
        formData.append('image', image);
        $.ajax({
            url: api.util.uploadImg,
            method: 'post',
            processData: false,
            contentType: false,
            data: formData,
            dataType: 'json',
            success: function (res) {
                if (res.code) {
                    $("[model='user_header']").attr('src', res.data.imgUrl);
                    $("[model='user_header']").addClass('success_upload');
                }
                msg(res.msg);
            }
        });
    });
</script>
<style>
    .user-data,
    .user-data-body {
        width: 1000px;
    }

    .user-data-body {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .user-data-body .data-item {
        width: 50%;
    }

    .header-panel {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .header-panel .header-item {
        width: 400px;
    }

    .header-panel .header-item.header {
        position: relative;
        margin-left: 30px;
        width: 120px;
        height: 190px;
        overflow: hidden;
    }

    .header-panel .header-item.header .default_add_header {
        z-index: 50;
    }

    .header-panel .header-item.header img {
        width: 100%;
        height: 100%;
        position: absolute;
        cursor: pointer;
    }

    .header-panel .header-item.header img.success_upload {
        z-index: 100;
    }

    .Adress-panel {
        display: flex;
        flex-wrap: nowrap;
    }
</style>

<script>
    layui.use('form', function () {
        var form = layui.form;

        form.render();
    });
</script>
<script src="./js/util-random.js"></script>
<script>
    ts.use('random', function () {
        var random = ts.Random;
        $("[model='real_name']").focus(function () {
            $(this).val(random.name());
        });
        $("[model='real_card']").focus(function () {
            var cardId = random.cardId();
            $("[model='user_birthday']").val(ts.getBirthdatByIdNo(cardId));
            $(this).val(cardId);
        });
        $("[model='user_email']").focus(function () {
            $(this).val(random.email());
        });
        $("[model='user_phone']").focus(function () {
            $(this).val(random.phone());
        });
        $("[model='user_national']").focus(function () {
            $(this).val(random.nation());
        });
        $("[model='user_info']").focus(function () {
            $(this).val(random.info());
        });
        $("[model='user_name']").focus(function () {
            $(this).val(random.nickname());
        });
        $("[model='user_address']").focus(function () {
            $(this).val(random.street());
        });
    });

</script>